<template>
  <view >
    <fui-landscape :show="show" maskClosable @close="closePopup">
        <view class="l-c">
              <image style="width: 100%;border-radius: 40rpx 40rpx 0 0;" :src="EnumBG.ABBG" mode="widthFix"></image>
             <view class="contents">
                    <view class="items">
                        <view class="item-title">
                            看广告免费获取结果
                        </view>
                        <!-- <view class="item-tip">
                            今日还可看3次
                        </view> -->
                    </view>
                    <view @click="showAb" class="ab">
                        <image class="fui-hd__img" :src="EnumBG.VW" mode="widthFix"></image>
                            <view class="">
                                看广告生成
                            </view>
                    </view>
             </view>

             <!-- <view class="contents vip">
                    <view class="items">
                        <view class="item-title">
                            免广告免费获取结果
                        </view>
                        <view class="vip-tip">
                            每日可解锁30次
                        </view>
                    </view>
                    <view class="ab ab-vip">
                      
                            <view class="">
                                立即开通
                            </view>
                    </view>
             </view> -->

        </view>
    </fui-landscape>
  </view>
</template>

<script setup lang="ts">
import { adAPI } from "@/utils/ab";
import { EnumBG } from "@/utils/content";
import { isAdmin } from "@/utils/constants";
import playingStore from "@/store/playing";
interface IProps {
    show: boolean
    sonFun:Function
}
const ad = ref()
const adStatus = ref(0)
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:show'])
const playing = playingStore()
const closePopup = ()=>{
    emit('update:show',false)
}
const showAb = ()=>{
    if(isAdmin(playing.code)){
        props.sonFun()
        return
    }
    uni.showLoading({
            title: "加载中",
            icon: "none",
    });
    ad && ad.value.show();
}
watch(adStatus, async () => {
    if(adStatus.value===1){
      setTimeout(() => {
        uni.hideLoading()
        props.sonFun()
       // adStatus.value = false
    }, 1500);
    }  if(adStatus.value===2){
        uni.hideLoading()
        uni.showToast({
            title: '看完视频才可继续',
            duration: 2000,
            icon:"none"
        })
        adStatus.value = 0
    }
});
watch(props,  () => {
    if(props.show){
        adStatus.value = 0
    }
});
onMounted(()=>{
    adAPI(ad,adStatus);
})

</script>

<style lang="scss" scoped>
.l-c{
    width: 700rpx;
    border-radius: 40rpx;
    background-color: white;
    .contents{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 40rpx;
        padding: 40rpx 0;
        border-bottom: 1rpx rgb(204, 204, 204) solid;
        font-size: 34rpx;
        .items{
            .item-title{
                font-weight: bold;
            }
            .item-tip{
                margin-top: 20rpx;
                color: rgb(122, 3, 3);
                font-size: 32rpx;
            }
        }
        .ab{
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgb(114,116,253);
            padding: 20rpx;
            border-radius: 20rpx;
            color: white;
            font-size: 32rpx;
            .fui-hd__img{
                width: 40rpx;
                margin-right: 10rpx;
            }
        }
        .ab-vip{
            background: rgb(42,42,42);
        }
    }
    .vip{
        border-bottom: 0rpx black solid;
    }
    .vip-tip{
            margin-top: 20rpx;
               
            font-size: 32rpx;
            color: rgb(68, 68, 68);
        }
}

</style>
